{#物资采购单#}
{% extends "personal_center/zichan_base.html" %}


{% block page_link %}
    <link rel="stylesheet" href="../../static/system_setup/css/style.css">
    <link rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
{% endblock %}

{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }

        .file-upload {
            display: none;
        / / 设置上传文件的input隐藏
        }

        .file {
            position: relative;
            display: inline-block;
            background: #D0EEFF;
            border: 1px solid #99D3F5;
            border-radius: 4px;
            padding: 4px 12px;
            overflow: hidden;
            color: #1E88C7;
            text-decoration: none;
            text-indent: 0;
            line-height: 20px;
        }

        .file input {
            position: absolute;
            font-size: 100px;
            right: 0;
            top: 0;
            opacity: 0;
        }

        .file:hover {
            background: #AADFFD;
            border-color: #78C3F3;
            color: #004974;
            text-decoration: none;
        }

        #title {
            display: flex;
            justify-content: space-between;
            box-sizing: border-box;
            padding: 0 10px;
            height: 50px;
            color: #0b0b0b;
            cursor: move;
            /*border: #dfdfdf solid 1px;*/
            width: 100%;
            background: #f4f7fa;
            border-top-left-radius: 5px;
            border-top-right-radius: 5px;
        }

        #addForm {
            width: 800px;
            height: 620px;
            background: #F5F5F5;
            position: absolute;
            border: #dfdfdf solid 1px;
            margin: auto;
            border-radius: 3px;
            top: 50%;
            left: 50%;
            /* 实现鼠标拖拽使用css3效果 */
            transform: translate(-50%, -50%);
            display: none;
            z-index: 10100;
            font-size: 0;
        }

        .search {
            width: 300px;
            display: flex;
            float: right;
            margin: 10px 0;
            margin-right: 1%;
            /*border: 1px solid red;*/
        }

        .search input {
            vertical-align: middle;
            float: left;
        / / 左浮动 flex: 4;
            height: 30px;
            width: 230px;
            outline: none;
            border: 1px solid #0070c1;
            box-sizing: border-box;
        / / 盒子模型，怪异IE盒子模型，width = content + border * 2 + padding * 2 padding-left: 10 px;
            border-bottom-left-radius: 3px;
            border-top-left-radius: 3px;
        }

        .search button {
            float: right;
            flex: 1;
            height: 30px;
            width: 70px;
            line-height: 30px;
            background-color: #0070c1;
            color: white;
            border-style: none;
            outline: none;
            border-bottom-right-radius: 3px;
            border-top-right-radius: 3px;
        }

        .search button i {
            font-style: normal;
        }

        .search button:hover {
            font-size: 16px;
        }

        .tab_top {
            width: 100px;
            height: 40px;
            line-height: 40px;
            text-align: center;
            display: inline-block;
            cursor: pointer;
        }

        table tr td input {
            width: 100%;
            height: 100%;
            border: none;
            outline: none;
            background: #FFFFFF;
        }

        table tr {
            height: 35px;
        }

        .jeinput_1{
            display: inline-block;
            width: 100%;
            padding-left: 10px;
            height: 36px;
            line-height: 34px\9;
            background-color: #fff;
            border-radius: 3px;
        }
    </style>
{% endblock %}

{% block right_content %}
    <div>
        <div class="headline">
            <div class="tab_top"><span class="iconfont icon-shuzizichan"></span>
                采购申请
            </div>
            <div style="line-height: 30px; text-align: right;display: inline-block; position: relative;left: 85%">
                <button onclick="submit_inventory()"
                        style="height: 30px; width: 100px; border: none; border-radius: 3px; outline: none; background: #1E90FF;color: #FFFFFF">
                    提&nbsp;&nbsp;交
                </button>
            </div>
        </div>
    </div>
    {#    填写资产登记信息#}
    <div style="width: 100%; height: auto; min-height: 95%; padding: 0 15%; background: #FFFFFF">

        <div style="background: #FFFFFF;padding-top: 20px;">
            <table id="table_01" style="border-collapse: collapse;border-color: #DCDCDC;" cellspacing="0" cellpadding="2" width="100%" border="1">

                <tr>
                    <td colspan="5" style="text-align: center;"><h3>京山市人民医院物资采购单</h3></td>
                </tr>

                <tr>
                    <td colspan="5" style="padding-left: 5px;background: #dfdfdf;">基本信息</td>
                </tr>

                <tr>
                    <td style="text-align: right;padding-right: 10px">订&nbsp;&nbsp;购&nbsp;&nbsp;人</td>
                    <td style="padding-left: 10px">{{ realname }}</td>
                    <td style="text-align: right;padding-right: 10px">
                        部&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;门
                    </td>
                    <td colspan="2" style="padding-left: 10px">{{ department }}</td>
                </tr>
                <tr>
                    <td style="text-align: right;padding-right: 10px">订购日期</td>
                    <td colspan="4">
                        <input type="text" class="jeinput_1" id="test12" placeholder="选择日期">
                    </td>
                </tr>

                <tr>
                    <td colspan="5" style="padding-left: 5px;background: #dfdfdf;">采购信息</td>
                </tr>

                <tr>
                    <th style="width: 20%; text-align: center;">商品名称</th>
                    <th style="width: 20%; text-align: center;">数量</th>
                    <th style="width: 20%; text-align: center;">单位</th>
                    <th style="width: 20%; text-align: center;">单价</th>
                    <th style="width: 20%; text-align: center;">金额(/元)</th>
                </tr>

                <tbody id="table-tbody">
                    <tr>
                    <td style="width: 20%; text-align: center;border-top: none;" id="select_depart_1">
                        <form action="">
                            <div>
                                <div>
                                    <div class="dropdown-sin-1">
                                        <select style="width: 100%;border: none;" placeholder="请选择物资名称"></select>
                                    </div>
                                </div>
                            </div>
                        </form>
                    </td>
                    <td style="width: 20%; text-align: center;border-top: none;">
                        <input type="number" name="" id="buy_num_1" style="text-align: center"
                               onblur="compute_number(this.id)">
                    </td>
                    <td id="product_unit_1" style="width: 20%;text-align: center;border-top: none;"></td>
                    <td style="width: 20%; text-align: center;border-top: none;">
                        <input type="number" name="" id="buy_money_1" style="text-align: center"
                               onblur="compute_number(this.id)">
                    </td>
                    <td style="width: 20%; text-align: center;border-top: none;" id="main_price_1"></td>
                </tr>
                </tbody>
            </table>
            <div style="width: 100%;margin-top: 5px;">
                <div style="display: inline-block; width: 75%;">
                    <span style="cursor: pointer" onclick="add_tr()">增加一条 </span>&nbsp;|&nbsp;
                    <span style="cursor: pointer" onclick="del_tr()">减少一条 </span>
                </div>
                <div style="display: inline-block; width: 24%; text-align: left; padding-left: 60px"><span>总金额：<span
                        id="all_total_price"></span></span></div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/personal_center/js/mock.js"></script>
    <script src="../../static/system_setup/js/jquery-1.10.2.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/jquery.dropdown.min.css">
    <script src="../../static/personal_center/js/jquery.dropdown.min.js"></script>
    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("zichan").className = "add_class";
            document.getElementById("buy_product_list").className = "add-nav-active";
            product_objs = {{ product_objs | safe }}
            select_document()

        };

        //自定义格式选择
        jeDate("#test12",{
            format: "YYYY-MM-DD"
        });

        //一次绑定多个选择
        var jel = document.querySelectorAll(".moredate");
        for(var j=0;j<jel.length;j++){
            var mat = jel[j].getAttribute("placeholder");
            jeDate(jel[j],{
                format: mat
            });
        }

        //一次绑定多个选择DIV类型
        var divel = document.querySelectorAll(".divmore");
        for(var j=0;j<divel.length;j++){
            var divmat = divel[j].getAttribute("placeholder");
            jeDate(divel[j],{
                format: divmat
            });
        }

        function appear_model() {
            document.getElementById("addForm").style.display = "inline-block";
        }

        function summit_val() {
            var cleck_box_list = document.getElementsByClassName("check_box");
            var xuanzhong = ""
            for (var t = 0; t < cleck_box_list.length; t++) {
                if (cleck_box_list[t].checked) {
                    xuanzhong = xuanzhong + cleck_box_list[t].id + ", "
                }
            }
            document.getElementById("select_depart").innerText = xuanzhong.slice(0, -2);
            document.getElementById("addForm").style.display = "none";
        }

        function close_models1() {
            document.getElementById("addForm").style.display = "none";
        }

        function add_tr() {
            var table = document.getElementById("table-tbody")
            var tr_num = table.rows.length + 1;
            var html_tr = `<tr>
                                <td style="width: 20%; text-align: center" id="select_depart_` + tr_num + `">
                                    <form action="">
                                        <div>
                                            <div>
                                                <div class="dropdown-sin-` + tr_num + `">
                                                    <select style="width: 100%;border: none;" placeholder="请选择商品名称"></select>
                                                </div>
                                            </div>
                                        </div>
                                    </form>
                                </td>
                                <td style="width: 20%; text-align: center">
                                    <input type="number" name="" id="buy_num_` + tr_num + `" style="text-align: center"
                                           onblur="compute_number(` + tr_num + `)">
                                </td>
                                <td id="product_unit_` + tr_num + `" style="width: 20%;text-align: center"></td>
                                <td style="width: 20%; text-align: center">
                                    <input type="number" name="" id="buy_money_` + tr_num + `" style="text-align: center"
                                           onblur="compute_number(` + tr_num + `)">
                                </td>
                                <td style="width: 20%; text-align: center" id="main_price_` + tr_num + `"></td>
                            </tr>`
            $("#table-tbody").append(html_tr);
            select_document(tr_num);
        }

        function del_tr() {
            $("#table-tbody tr").eq(-1).remove();
            var table = document.getElementById("table-tbody")
            var rows = table.rows.length;
            var total_price = 0
            for (var i = 0; i < rows + 1; i++) {
                var tag_id = "main_price_" + i;
                var each_price = $("#" + tag_id).text();
                total_price += Number(each_price)
            }
            console.log("total_price: ", total_price)
            document.getElementById("all_total_price").innerText = String(total_price)
        }

        // 鼠标离开时触发
        function compute_number(ele_id) {
            var table = document.getElementById("table_01")
            var rows = table.rows.length;
            if (ele_id === 'buy_num_1' || ele_id === "buy_money_1") {
                var number_1 = $("#buy_num_1").val();
                var price = $("#buy_money_1").val();
                if (!number_1) {
                    number_1 = 0;
                }
                if (!price) {
                    price = 0;
                }
                var total = number_1 * price
                document.getElementById("main_price_1").innerText = String(total.toFixed(2));
            } else {
                number_1 = $("#buy_num_" + ele_id).val();
                price = $("#buy_money_" + ele_id).val();
                if (!number_1) {
                    number_1 = 0;
                }
                if (!price) {
                    price = 0;
                }
                total = number_1 * price
                document.getElementById("main_price_" + ele_id).innerText = String(total.toFixed(2));
            }
            var total_price = 0
            for (var i = 0; i < rows + 1; i++) {
                var tag_id = "main_price_" + i;
                var each_price = $("#" + tag_id).text();
                total_price += Number(each_price)
            }
            document.getElementById("all_total_price").innerText = String(total_price.toFixed(2))
        }

        function select_document(tr_num = 1) {
            obj_product = {}  // 创建一个新对象方便后面选择框赋值单位
            for (var jj = 0; jj < product_objs.length; jj++) {
                product_objs[jj]["disabled"] = false
                product_objs[jj]["selected"] = false
                obj_product[product_objs[jj]['id']] = product_objs[jj]['unit']
            }
            $('.dropdown-sin-' + tr_num + '').dropdown({
                data: product_objs,
                input: '<input type="text" maxLength="20" placeholder="请输入搜索">',
                choice: function () {
                    var ff = this.name[0]
                    var data_li = ff.match(/ data-id="(.*?)"/)
                    var data_id = data_li[1]
                    var danwei = obj_product[data_id]
                    document.getElementById("product_unit_"+tr_num).innerText=danwei;
                }
            });
        }

        function submit_inventory() {
            var line_list = [];
            var date = $("#test12").val();
            var total_amount = $("#all_total_price").text();
            var name_li = document.getElementsByClassName("del");
            for (var tt = 1; tt < name_li.length+1; tt++) {
                var Dateform = {
                    'product_id': name_li[tt-1].getAttribute("data-id"),
                    'qty': $("#buy_num_" + tt).val(),
                    'unit': $("#product_unit_" + tt).text(),
                    'price': $("#buy_money_" + tt).val(),
                    'amount': $("#main_price_" + tt).text()
                };
                if (!Dateform['product_id']) {
                    alert('请选择物资!')
                 }
                line_list.push(Dateform)
            }
            if (!date) {
                alert('请填写采购日期！')
                return false
             }
            if (!Dateform['product_id']) {
                alert("请选择物资!")
                return false
             }
            if (!date) {
                alert('请选择订购日期！')
                return false
            }
            {#console.log(date, total_amount, JSON.stringify(line_list))#}

            var xhr = new XMLHttpRequest();
            var local_host = window.location.host;
            xhr.open('post', "/personal-center/product_order_page", true);
            xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('Access-Control-Allow-Origin', '*');
            xhr.send('date=' + date + '&total_amount=' + total_amount + "&line_list=" + JSON.stringify(line_list))
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status === 200) {
                        alert("创建成功！")
                        window.location.href = "/personal-center/product_apply_detail_page";
                        document.getElementById("loading").style.display = "none";
                    }
                }
             }
        }

    </script>
{% endblock %}